<!doctype html>
<html lang="en">
	<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>yecq_thread_ui</title>
	</head>
	<script type="text/javascript" src="jquery-3.1.4.js">
	</script>

	<link rel="stylesheet" href="../Bootstrap/bootstrap.css">
	<style type="text/css">
		/*整个表格的div容器*/
		#table {
			width: 700px;
			height: 400px;
		}
		/*设置按钮内的内容*/
		
		#set_button_text {
			width: 100px;
			height: 80px;
			display: none;
		}
		/*创建进程中的内容*/
		
		#create_thread_text {
			width: 100px;
			height: 20px;
			display: none;
		}
	</style>

	<body>
		<h1 style="display: none;"></h1>
		<center>
			<!--整个表格所在的div-->
			<div id="table">
				<table class="table" border="2px" cellpadding="0px" cellspacing="0px" width="150px" height="130px">
					<!--标题栏设置-->
					<tr>
						<td colspan="3">
							<font size="4">
								<strong>yecq_liuchen_thread</strong>
							</font>
						</td>
					</tr>
					<!--按钮栏(设置关于)-->
					<tr>
						<td colspan="3">
							<input type="button" class="btn btn-info" id="set" value="设置" /> &nbsp;&nbsp;
							<input type="button" class="btn btn-warning" id="about" value="关于" />
						</td>
					</tr>
					<!--创建、停止进程-->
					<tr>
						<td colspan="3">
							<input type="button" class="btn btn-primary" id="create_thread" value="创建进程" />&nbsp;&nbsp;
							<input type="button" class="btn btn-primary" id="stop_thread" value="停止进程" />
						</td>
					</tr>
					<!--运行态、就绪态、阻塞态三种形式-->
					<tr>
						<td>运行态</td>
						<td>就绪态</td>
						<td>阻塞态</td>
					</tr>
					<!--运行、阻塞、停止按钮-->
					<tr>
						<td>
							<input class="btn btn-group" type="button" id="run_thread_button_run" value="运行" />
							<input class="btn btn-group" type="button" id="run_thread_button_block" value="阻塞" />
						</td>
						<td>
							<input class="btn btn-group" type="button" id="ready_thread_button_stop" value="停止" />
						</td>
						<td>
							<input class="btn btn-group" type="button" id="block_thread_button_run" value="运行" />
							<input class="btn btn-group" type="button" id="block_thread_button_block" value="阻塞" />
						</td>
					</tr>
					<!--具体进程显示-->
					<tr>
						<td>
							<div id="run">
								<table class="table" id="table1" border="1px" cellspacing="0px" cellpadding="0px">
									<tr>
										<td>PID</td>
										<td>名称</td>
										<td>时间片</td>
										<td>剩余运行时间</td>
									</tr>
								</table>
							</div>
						</td>
						<td>
							<div id="">
								<table class="table" id="table2" border="1px" cellspacing="0px" cellpadding="0px">
									<tr>
										<td>PID</td>
										<td>名称</td>
										<td>剩余运行时间</td>
									</tr>
								</table>
							</div>
						</td>
						<td>
							<div id="">
								<table class="table" id="table3" border="1px" cellspacing="0px" cellpadding="0px">
									<tr>
										<td>PID</td>
										<td>名称</td>
									</tr>
								</table>
							</div>
						</td>
					</tr>

				</table>
			</div>
		</center>

		<!--设置栏目内容-->
		<div id="set_button_text">
			<table border="1px" cellspacing="0px" cellpadding="0px" width="180px" height="70px">
				<tr>
					<td>
						<font>
							<strong>时钟中断频率:</strong>
						</font>
					</td>
					<td>
						<select>
							<option value="1" selected="selected"> 1 </option>
							<option value="2"> 2 </option>
							<option value="3"> 3 </option>
						</select>
					</td>
				</tr>

				<tr>
					<td>
						<font>
							<strong>进程事件片:</strong>
						</font>
					</td>
					<td>
						<select>
							<option value="10" selected="selected"> 10 </option>
							<option value="20"> 20 </option>
							<option value="30"> 30 </option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						<font>
							<strong>进程池容量:</strong>
						</font>
					</td>
					<td>
						<select>
							<option value="10" selected="selected"> 10 </option>
							<option value="20"> 20 </option>
							<option value="30"> 30 </option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						<font>
							<strong>CPU数量:</strong>
						</font>
					</td>
					<td>
						<select>
							<option value="1" selected="selected"> 1 </option>
							<option value="2"> 2 </option>
							<option value="3"> 3 </option>
						</select>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" class="btn btn-success" id="true" value="确定" />
						<input type="button" class="btn btn-danger" id="false" value="取消" />
					</td>
				</tr>
			</table>
		</div>

		<!--创建进程文本框-->
		<div id="create_thread_text">
			<table class="table" border="1px" cellspacing="0px" cellpadding="0px">
				<tr>
					<td>进程名称:</td>
					<td>
						<input type="text" id="create_thread_text_input" value="" />
					</td>
				</tr>
				<tr>
					<td>运行时间:</td>
					<td>
						<select>
							<option value="5" selected="selected"> 5 </option>
						</select>
						seconds
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" class="btn btn-success" id="true" value="确定" />
						<input type="button" class="btn btn-danger" id="false" value="取消" />
					</td>
				</tr>
			</table>
		</div>

		<!--设置按钮的响应事件-->
		<script type="text/javascript">
			$("input[id=set]:eq(0)").click(function() {
				var $set_button_text = $("#set_button_text");
				$set_button_text.css("display", "block");
				$set_button_text.css("position", "absolute");
				$set_button_text.css("top", "50%");
				$set_button_text.css("left", "50%");
			});
		</script>
		<!--设置设置框栏中 确定取消响应属性按钮-->
		<script type="text/javascript">
			$("input[id=true]:eq(0)").click(function() {
				var $set_button_text = $("#set_button_text");
				$set_button_text.css("display", "none");
			});
			$("input[id=false]:eq(0)").click(function() {
				alert("请重新到后台设置具体信息");
			});
		</script>

		<!--关于按钮的响应-->
		<script type="text/javascript">
			$("input[id=about]:eq(0)").click(function() {
				alert("抄袭必挂");
			});
		</script>
		<!--创建进程栏确定/取消按钮-->
		<script type="text/javascript">
			$("input[id=true]:eq(1)").click(function() {
				var $set_button_text = $("#create_thread_text");
				$set_button_text.css("display", "none");
				// 创建待 挂载对象
				var $name = $("#create_thread_text_input").val();
				var $tr = $("<tr id='PID_table'></tr>");
				var $tr_ready = $("<tr id='PID_table_ready'></tr>");
				
				var i = 0;
				var timer = setInterval(function() {
					if(i < 0) {
						$("#PID_table_ready").css("display", "none");
					} else {
						var $timer = i;
						i--;
						$tr_ready.html("<td id='PID_ready'>" + 1 + "</td>" + "<td id='name_run'>" + $name + "</td>"  + "<td>" + $timer + "</td>")
						$("#table2").append($tr_ready);
					}
				}, 1000);
				
				var j = 1000;
				var timer = setInterval(function() {
					if(j < 0) {
						$("#PID_table").css("display", "none");
					} else {
						var $timer = j;
						j=j-5;
						$tr.html("<td id='PID_run'>" + 1 + "</td>" + "<td id='name_run'>" + $name + "</td>" + "<td>" + 5 + "</td>" + "<td>" + $timer + "</td>")
						$("#table1").append($tr);
					}
				}, 1000);
			});

			$("input[id=false]:eq(1)").click(function() {
				alert("请重新到后台设置具体信息");
			});
		</script>

		<!--创建进程操作-->
		<script type="text/javascript">
			$("#create_thread").click(function() {
				var $create_thread_text = $("#create_thread_text");
				$create_thread_text.css("display", "block");
				$create_thread_text.css("position", "absolute");
				$create_thread_text.css("top", "50%");
				$create_thread_text.css("left", "50%");
			});
		</script>
		
		<!--停止进程操作-->
		<script type="text/javascript">
			$("#stop_thread").click(function() {
				$("#PID_table").css("display", "none");
				$("#PID_table3").css("display", "none");
			});
		</script>
		
		<!--运行态下的阻塞操作-->
		<script type="text/javascript">
			$("#run_thread_button_block").click(function() {
				$("#PID_table").css("display", "none");
				var $table1_PID = $("#PID_run").text();
				var $table1_name = $("#name_run").text();
				var $tr3 = $("<tr id='PID_table3'></tr>");
				$tr3.html("<td id='PID_block'>" + $table1_PID + "</td>" + "<td id='name_block'>" + $table1_name + "</td>")
				$("#table3").append($tr3);
			});
		</script>

		<!--阻塞态下的运行操作-->
		<script type="text/javascript">
			$("#block_thread_button_run").click(function() {
				$("#PID_table3").css("display", "none");
				$("#PID_table").css("display", "block");
			});
		</script>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script src="../Bootstrap/bootstrap.js"></script>
	</body>

	</html>